import React, { useState } from 'react'
import { useInit } from '../hhh'

import { Space, Table, Tag, Input, Button } from 'antd';

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
    render: (_, { tags }) => (
      <>
        {tags.map((tag) => {
          let color = tag.length > 5 ? 'geekblue' : 'green';
          if (tag === 'loser') {
            color = 'volcano';
          }
          return (
            <Tag color={color} key={tag}>
              {tag.toUpperCase()}
            </Tag>
          );
        })}
      </>
    ),
  },
  {
    title: 'Action',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <a>Invite {record.name}</a>
        <a>Delete</a>
      </Space>
    ),
  },
];

export default function login() {
  const [list, search] = useInit("/api/abc")
  const [val, setVal] = useState("")
  // const [ data ] = useInit("/api/def")
  return (
    <div>
      <Input  value={val} onChange = {(ev: any) => {
        setVal(ev.target.value)
      }}/>
      <Button onClick={ () => {
        search(val)
      }}>搜索</Button>
      <Table columns={columns} dataSource={list} />
      {/* <Table columns={columns} dataSource={data} /> */}
    </div>
  )
}
